<template>
  <wd-sticky>
    <wd-card>
      <view class="detailHead">
        <wd-button type="warning" plain @click="changeSearchType">最新</wd-button>
        <wd-calendar v-model="selectMonth" type="month" @confirm="search" />
      </view>
      <wd-search
        v-model="searchValue"
        :maxlength="10"
        hide-cancel
        @search="search"
        @clear="search"
      />
    </wd-card>
  </wd-sticky>
  <wd-status-tip
    v-if="JSON.stringify(dailyData) == '{}'"
    type="search"
    tip="当前搜索无结果"
  />
  <view v-else style="overflow: auto">
    <wd-card v-for="item in Object.keys(dailyData)" :key="item" :title="item">
      <view style="padding-bottom: 1px">
        <view v-for="value in dailyData[item]" :key="value.id" style="border: #fe9400 dashed 1px;padding: 10px 10px 0 10px; border-radius: 8px;margin: 0 0 20px 0" @click="showDetail(value.id)"  @longpress="handlePlanDel(value.id)">
          <view style="display: flex;align-items: center;">
            <view style="font-size: 15px; font-weight: bold">{{ value.recordTitle }}&nbsp&nbsp</view>
            <view style="font-size: 10px;">{{ value.createTime }}</view>
          </view>
          <view style="display: flex;align-items: center;justify-content: space-between;">
            <view>{{ value.recordContent }}</view>
            <view style="padding: 10px">
              <wd-img
                width="100"
                height="80"
                :src="value.images ? JSON.parse(value.images)[0].url : null"
              />
            </view>
          </view>
        </view>
      </view>
    </wd-card>
  </view>
  <view class="floating-button" @click="handleClick">
    <text>+</text>
  </view>
  <wd-popup v-model="calendarShow"></wd-popup>
</template>
<script setup lang="js">
import DailyRecordAPI from "@/api/daily/daily-record";
import UserAPI from "@/api/system/user";
import DietPlanAPI from "@/api/diet/diet-plan";

const dailyData = ref({});
const searchValue = ref("");
const calendarShow = ref(false);
const selectMonth = ref();
const isLatest = ref(true);
onShow(async () => {
  const userInfo=await UserAPI.getProfile()
  if(userInfo.height&&userInfo.weight&&userInfo.age&&userInfo.gender){
    search();
  }else {
    uni.navigateTo({
      url: "/pages/mine/profile/index"
    })
  }
});
function handlePlanDel(id, type) {
  wx.showModal({
    title: "提示",
    content: "是否删除？",
    success(res) {
      if (res.confirm) {
        DailyRecordAPI.deleteByIds(id).then((res) => {
          uni.showToast({ title: "删除成功", icon: "none" });
          search()
        });
      }
    },
  });
}
function showDetail(id){
  uni.navigateTo({
    url: `/pages/daily/form?id=${id}`,
  });
}
function search() {
  if (
    (searchValue.value != null && searchValue.value !== "") ||
    (selectMonth.value != null && selectMonth.value !== "")
  ) {
    isLatest.value = false;
  }
  if (isLatest.value === true) {
    DailyRecordAPI.getLatest().then((res) => {
      dailyData.value = res;
    });
  } else {
    DailyRecordAPI.getPage({
      recordTitle: searchValue.value,
      recordDate: [selectMonth.value],
      pageSize: 999,
    }).then((res) => {
      dailyData.value = res;
    });
  }
}
function changeSearchType() {
  selectMonth.value = null;
  searchValue.value = "";
  isLatest.value = true;
  search();
}
function handleClick() {
  uni.navigateTo({
    url: "/pages/daily/form",
  });
}
onLoad((data) => {
  console.log(data);
});
</script>

<style lang="scss">
.floating-button {
  position: fixed;
  bottom: 150px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #fe9400;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 30px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 999; /* 确保按钮浮在最前 */
}
.search-type {
  position: relative;
  height: 30px;
  line-height: 30px;
  padding: 0 8px 0 16px;
}
.search-type::after {
  position: absolute;
  content: "";
  width: 1px;
  right: 0;
  top: 5px;
  bottom: 5px;
  background: rgba(0, 0, 0, 0.25);
}
.search-type span {
  display: inline-block;
  vertical-align: middle;
}
.search-type .icon-arrow {
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.detailHead {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 10px;
  width: 84vw;
}
</style>
